I am trying to focus on a textarea in Vue.js, but I am getting the following error:
TypeError: _this2.$refs[ref].focus is not a function
This is the textarea:
<textarea v-model="text[key].content" :ref="text[key].text_id" class="text-textarea" @focus="makeCurrent(key)" v-on:keyup="detectVariable(key, text[key].text_id)"></textarea>
This is my code:
let ref = 'foobar';
console.log(this.$refs[ref]);
this.$refs[ref].focus();
The console.log prints out the correct textarea:
0: textarea.text-textarea
But when I try to focus I get the error mentioned above. I don't understand this behavior at all. The ref exists and points to the correct textarea (it's the only textarea on the page for now, to avoid confusion) but focus is not a function on it?
When a ref is used inside a v-for loop, it behaves differently, and the ref is an array of the elements/components with a given ref within the loop.
For example, if I have the following, where keys contains multiple values,
<div v-for="key in keys">
<textarea ref="textAreaInput">
</div>
To focus the first, I'd do this.$refs['textAreaInput'][0].focus()